<template>
	<div class="header-main"> 
		<a href="javascript:;" v-if="headerData.type != 'normal' || headerData.path == '/loans/cockpit'" @click="goBack" class="header-back"><i class="icon icon-jiantou"></i></a>
		<div class="header-con" v-if="headerData.type == 'org'">
			<!-- <span v-if="headerData.orgList" @click="isShow = !isShow">{{headerData.title}} <i class="icon icon-arror-down1"></i></span> -->
			<span>{{headerData.title}}</span>
		</div>
		<div class="header-con" v-if="headerData.type == 'router'">
			<span v-if="headerData.menuList && headerData.menuList.length > 0" @click="isShow = !isShow">{{headerData.title}} <i class="icon icon-arror-down1"></i></span>
			<span v-else>{{headerData.title}}</span>
		</div>
		<div class="header-con" v-if="headerData.type == 'normal'">
			<span>{{headerData.title}}</span>
		</div>
		<div class="header-contr" v-if="headerData.type != 'normal'">
			<i class="icon icon-bangzhu" @click="guide"></i>
			<i :class="[isStart ? 'icon-shoucang1' : 'icon-shoucang', 'icon']" @click="startPage" v-if="headerData.type == 'router'"></i>
		</div>
		<div class="sort-con" @touchmove.stop.prevent>
			<transition name= "showlist">
				<section v-show="isShow" class="sort-detail-type">
					<!-- <ul v-if="headerData.type =='org'" class="sort-list-container">
						<li v-for="(item, index) in headerData.orgList" class="sort-list-li" @click="chooseItem(item.path, item.title)">
							<p :class="{'sort-select': headerData.path === item.path}">
								<span>{{item.title}}</span>
								<span class="icon icon-complete fr"></span>
							</p>
						</li>
					</ul> -->
					<ul v-if="headerData.type =='router'" class="sort-list-container">
						<li v-for="(item, index) in headerData.menuList" class="sort-list-li">
							<a href="javascript:;" :to="item.path" @click="chooseItem(item.path, item.title)">
								<p :class="{'sort-select': headerData.path == item.path}">
									<span>{{item.title}}</span>
									<span class="icon icon-complete fr"></span>
								</p>
							</a>
						</li>
					</ul>
				</section>
			</transition>
		</div>
		<transition name="showcover">
			<div class="back-cover" @click="isShow = !isShow" @touchmove.stop.prevent v-show="isShow || isGuide"></div>
		</transition>
		<section class="guide" v-if="isGuide" @touchmove.stop.prevent>
			<img src="../assets/introduction.png">
			<div class="close-guide" @click="guide">我知道了</div>
		</section>
	</div>
</template>
<script>
/**
 * @param {String} headerData.title 路由名字
 * @param {String} headerData.type 路由类型 （页面切换 或者 地区切换）
 * @param {String} headerData.path 路由地址  (路由地址 或者 orgID)
 * @param {Array} headerData.menuList 路由列表
 */
 import {native} from '../utils/nativeApi'
 import { Toast } from 'mint-ui'
 export default {
 	name: 'dy-header',
 	data () {
 		return {
 			isGuide: false,
 			isShow: false,
 			isStart: false,
 		}
 	},
 	computed: {
 		headerData () {
 			return this.$store.getters.headerData
 		},
 		period ()  {
 			return this.$store.getters.period
 		},
 		orgId ()  {
 			return this.$store.getters.orgId
 		} 		
 	},
 	watch : {
	 	headerData () {
	 		if(Object.keys(this.$store.getters.detailCondit).length > 0) {
	 			this.headerData.menuList = [];
	 			this.$store.commit('headerData', this.headerData)
	 		}
	 		if(this.headerData.type == 'router') {
		 		api.checkSaveFlag({router: this.headerData.path}).then(data => {
					if(data.saveFlag == 1) {
						this.isStart = true
					}else {
						this.isStart = false
					}
				})
			}
	 	}
 	}, 	
 	methods : {	
 		goBack() { 	
 			// 收藏页跳转过来
 			if(Object.keys(this.$store.getters.detailCondit).length > 0) {
 				this.$router.go(-1)
 			}else if(location.href.match('/loans/cockpit') || location.href.match('/all/index') ||location.href.match('/collect/index')) {
 				// let time = store.getters.time
 				// let busiList = localStorage.getItem('busiList') 
			  // 	busiList = busiList ? JSON.parse(busiList) : {list: []}
			  // 	busiList.list.push(_busi)

 				// api.monitorBusi()

		        native.onBack()

		        // 其他地址
		    } else if(location.href.match('/loans')) {
		        this.$router.push('/loans/cockpit')
		    }
 		},
 		startPage() {
 			let startCondit = this.$store.getters.startCondit
 			startCondit.conditName = startCondit.conditName.match('_') ? startCondit.conditName.replace(/\_.*/, '_' +this.period.name) : startCondit.conditName + '_' + (this.period.name ? this.period.name : '')
 			startCondit.router = this.headerData.path
 			startCondit.title = this.headerData.title
 			startCondit.condit.collectCondit = {
 				api: this.headerData.path.split("/")[2] +'Major',
 				param: {
 					period: this.period.val ? this.period.val : undefined,
 					orgId: this.orgId
 				}
 			}
 			if(this.isStart) {
 				api.cancelCollect({router: this.headerData.path}).then(data => {
	 				if(data == 'success') {
	 					this.isStart = false
	 					Toast('取消收藏成功')
	 				}
	 			})
 			} else {
 				api.saveDataInfo(startCondit).then(data => {
	 				if(data == 'success') {
	 					Toast('收藏成功')
	 					this.isStart = true
	 				}
	 			})
 			}
 		},
 		guide () {
 			this.isGuide = !this.isGuide;
 		}, 		
 		chooseItem (path, title) {
 			let _data = {type: this.headerData.type, 'path' : path, 'title': title}
 			_data.orgList = this.headerData.orgList
 			_data.menuList = this.headerData.menuList

 			this.$store.commit('headerData', _data);
 			this.isShow = !this.isShow

 			if (this.headerData.type == 'router') {
 				this.$router.push({path: path})
 			} else if (this.headerData.type == 'org') {
 				this.$store.commit('orgId', path);
 			}
 		}
 	}
 }
 </script>
 <style lang="less" scope>
 @import '../assets/less/base.less';
 .header-main {
 	position: fixed;
 	top:0;
 	left: 0;
 	width: 100%;
 	-webkit-box-align: center;
 	-ms-flex-align: center;
 	align-items: center;
 	box-sizing: border-box;
 	display: block;
 	height: 2rem;
 	line-height: 2rem;
 	text-align: center;
 	background: #ff7327;
 	color: #fff;
 	z-index: 100;

 	.guide {
 		position: absolute;
 		left: 0;
 		top: 2rem;
 		width: 100%;
 		z-index: 101;
 		img {
 			margin: 6rem 0 0 1rem;
 			width: 62%;
 		}
 	}

 	.close-guide {
 		margin: 4rem auto 0;
 		width: 5rem;
 		height: 1.5rem;
 		line-height: 1.5rem;
 		text-align: center;
 		border: .05rem solid #fff;
 		border-radius: .2rem;
 		font-size: .7rem;
 	}

 	.header-contr {
 		padding-right: .5rem;
 		position: absolute;
 		right: 0;
 		top: 0;
 		width: 3rem;
 		height: 2rem;

 		.icon {
 			margin-left: .5rem;
 		}
 	}

 	.header-back {
 		display: block;
 		top: 0;
 		left: .7rem;
 		position: absolute;
 		height: 2rem;
 		text-align: center;
 		color: #fff;
 	}

 	.sort-main .sort-detail-type{
 		top: 2rem;
 	}

 	.header-con span{
 		display: inline-block;
 		height: 2rem;
 		padding: 0 .3rem;
 		font-size: .7rem;

 		&>.icon {
 			margin-left: .2rem;
 			font-size: .5rem;
 		}
 	}

 	.icon-jiantou {
 		font-size: .75rem;
 		font-weight: bold;
 	}

 	.sort-con {
 		.sort-detail-type{
 			width: 100%;
 			position: absolute;
 			display:flex;
 			top: 2rem;
 			left: 0;
 			background-color: #fff;
 			z-index: 11;
 		}

 		.sort-list-container{
 			height: 12rem;
 			max-height: 16rem;
 			overflow-y: scroll;
 			width: 100%;
 		}

 		.sort-list-li{

 			&>a {
 				display: block;
 				width: 100%;
 			}

 			height: 2rem;
 			display: flex;
 			align-items: center;
 		}

 		p{
 			padding: 0 .45rem;
 			line-height: 2rem;
 			flex: auto;
 			text-align: left;
 			text-indent: 0.25rem;
 			border-bottom: @border;
 			align-items: center;

 			span{
 				color: @h2-color;

 				&.icon-complete {
 					display: none;
 					font-size: .8rem;
 				}
 			}
 		}

 		p.sort-select{
 			span{
 				color: @on-color;

 				&.icon-complete {
 					display: inline-block;
 				}
 			}
 		}
 	}
 }
 </style>


